<template>
    <div style="width: 390px;height: 500px;">
<van-skeleton v-show="gjp" title :row="10" />
    <van-nav-bar title="订单" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" fixed />
    <div style="height: 45px;"></div>
    <van-cell-group>
        <van-cell title="用户名" value="刘贝贝" />
        <van-cell title="手机号" value="13962001793" />
        <van-cell title="地址" value="辽宁省鞍山市立山区东大街123号" />
    </van-cell-group>
    <van-empty v-if="!cartData.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80" description="描述文字" />
    <div v-for="item in cartData">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <template #thumb>
                    <div style="display: flex;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            alt="" style="width: 70px;height: 70px;">
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)"
                    style="height: 100%;" />
            </template>

        </van-swipe-cell>

        <van-submit-bar :price="allprice" button-text="去结算" @submit="onSubmit">
            <van-checkbox v-model="checkedall">全选</van-checkbox>
        </van-submit-bar>
    </div>
    <div>
        <div style="font-weight: bold;margin-left: 10px;margin-top: 10px;">支付方式</div>
        <div style="margin-left: 10px;"><van-icon name="wechat-pay" />微信支付</div>
        <van-cell title="资金劵" is-link value="有可用代金券" style="margin-top: 10px;" />
        <van-cell title="商品劵" is-link value="有可用商品劵" />
        <van-cell title="发票" is-link value="普通发票" />
        <van-cell title="备注：" is-link value="填写内容请和卖家协商"/>
        
    </div>
    </div>
    
</template>

<script setup>
import { orderApi, orderdetailApi } from '@/api/api';
import { useCounterStore } from '@/stores/piniaCart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let gjp = ref(false)
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let cartData = ref([])
let cart = () => {
    cartData.value = store.piniaCart
}
cart()
let del = (id) => {
    store.piniaCart = store.piniaCart.filter(item => item.id != id)
    cart()
}
let checkedall = computed({
    get() {
        if (cartData.value.length == 0) {
            return false
        } else {
            return cartData.value.every(item => item.checked)
        }
    },
    set(val) {
        cartData.value.forEach(item => item.checked = val)
    }
})
let allprice = computed(() => {
    let allprice = ref(0)
    let cartOk = cartData.value.filter(item => item.checked)
    cartOk.forEach(item => {
        allprice.value += (item.number * 10 / 10) * item.goods.goods_price
    })
    return allprice.value * 100
})
let route = useRoute()
let orderdetailApiData = ref([])
orderdetailApi(route.params.orderId).then(res => {
    console.log('订单详情', res)
    gjp.value=true
    orderdetailApiData.value = res.data.data
})
setInterval(()=>{
    gjp.value=false
},2000)
</script>

<style lang="scss" scoped></style>